<template>
    <view class="myInfoClass bg-white">
        <view class="h-276rpx w-full px-42rpx pt-20rpx infoTop f-c">
            <image
                :src="userInfo?.avatar ? userInfo.avatar : client"
                class="wh-124rpx b-3rpx border-solid b-rd-62rpx b-hex-FFFFFF mr-35rpx"
                mode=""
            />
            <view class="text-hex-ffffff">
                <view class="mb-18rpx">{{ userInfo?.createBy }}</view>
                <view>{{ userInfo?.dept.deptName }}-{{ roles }}</view>
            </view>
        </view>
        <view class="px-30rpx py-10rpx mt-20rpx m-auto">
            <view
                class="h-100rpx f-c"
                v-for="(item, index) in infoFnList"
                :key="index"
                @click="operation(item)"
            >
                <van-icon :name="item.img" color="#333333" class="wh-20px" />
                <text class="ml-26rpx text-30rpx">{{ item.name }}</text>
                <van-icon class="ml-auto" size="16" name="arrow"></van-icon>
            </view>
        </view>
    </view>
    <!-- 退出登录确认框 -->
    <van-dialog
        v-model:show="loginOutShow"
        title="提示"
        show-cancel-button
        @confirm="loginOut"
    >
        <view class="f-c-c pt-20rpx pb-30rpx">
            <van-icon name="warning-o" color="#ffba00" />
            <span class="pl-20rpx">确定注销并退出系统吗？</span>
        </view>
    </van-dialog>
</template>

<script>
import { defineComponent, reactive, toRefs, onMounted } from 'vue'
import { getProfile } from '@/api/login.js'
import password from '@/static/image/password.png'
import tuichu from '@/static/image/tuichu.png'
import account from '@/static/image/account.png'
import client from '@/static/image/client.png'
export default defineComponent({
    props: {},
    setup(props, { emit }) {
        const state = reactive({
            userInfo: null, //用户个人信息
            roles: null, //登录用户角色
            client: client, //用户头像
            infoFnList: [
                {
                    name: '个人资料',
                    img: account,
                    address: '/pages/myInfo/userInfo',
                },
                {
                    name: '修改信息',
                    img: 'records-o',
                    address: '/pages/myInfo/setInfo',
                },
                {
                    name: '修改密码',
                    img: password,
                    address: '/pages/myInfo/setPassword',
                },
                { name: '退出登录', img: tuichu, address: '' },
            ], //操作模块数据
            loginOutShow: false, //退出登录模态框visible
            profileObj: null,
        })
        const methods = {
            /* 点击操作函数 */
            operation(item) {
                if (item.name == '退出登录') {
                    state.loginOutShow = true
                } else {
                    uni.navigateTo({
                        url:
                            item.address +
                            '?profileObj=' +
                            JSON.stringify(state.profileObj),
                    })
                }
            },
            /* 退出登录 */
            loginOut() {
                uni.removeStorageSync('token')
                uni.removeStorageSync('userInfo')
                uni.reLaunch({ url: '/pages/login/login' })
            },
        }
        const apis = {
            /* 获取登录人信息 */
            getProfile() {
                getProfile().then((res) => {
                    if (res.code == 200) {
                        state.profileObj = res
                        state.roles = res.postGroup
                        state.userInfo = res.data
                    }
                })
            },
        }
        const computeds = {}
        onShow(() => {
            apis.getProfile()
        })
        onMounted(() => {})
        return {
            ...apis,
            ...toRefs(state),
            ...methods,
            ...computeds,
        }
    },
})
</script>

<style lang="less" scoped>
.myInfoClass {
    height: 100vh;
    .infoTop {
        background: url('../../static/image/myInfoBg.png') no-repeat left top;
        background-size: cover;
    }
}
</style>
